<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="renderer" content="webkit" />
  <meta name="full-screen" content="yes" />
  <meta name="x5-fullscreen" content="true" />
  <meta name="format-detection" content="telphone=no, email=no" />
  <meta name="apple-mobile-web-app-status-bar-style" content="default" />
  <title>AKjs移动端框架</title>
  <link rel="stylesheet" type="text/css" href="../css/akjs.mobile.min.css" /><!--AKjs公共样式库引入-->
  <link rel="stylesheet" type="text/css" href="../css/style.css" /><!--布局相关样式-->
  <link rel="stylesheet" type="text/css" href="../css/theme.default.css" /><!--颜色相关样式-->
  <script type="text/javascript" language="javascript" src="../js/jquery.min.js"></script>
  <script type="text/javascript" language="javascript" src="../js/data.js"></script><!--Json数据-->
  <script type="text/javascript" language="javascript" src="../js/akjs.mobile.min.js"></script><!--AKjs引入-->
</head>
<body>

<!----------AKjs_PopupWin---------->
<header class="press bor_bottom bor_gray_ddd bg_gray_f9f dis_block">
  <button type="button" class="left_0 w_25 pl_3 text_al_l fs_12rem" id="plug_menu_left"><i class="fs_14rem icon-im_fenlei"></i></button>
  <h1 class="text_al_c">瀑布流展示</h1>
  <button type="button" class="right_0 w_25 pr_3 text_al_r fs_12rem" id="plug_menu_right"><i class="fs_14rem icon-im_fenlei"></i></button>
</header>

<main>

  <!--main元素里面必须有id="ak-main"才能正常运行，当前元素是内容区域的容器。-->
  <div id="ak-main" class="defer_fadein_05">
    <scrollview id="ak-scrollview">
      <div class="plug_waterfall module mt_3 mb_3 wm_96">
      </div>
    </scrollview>
  </div>
  <!--ak-main End-->

  <!----------AKjs_PopupWin Start---------->
  <dialog id="plug_MenuWin" class="dis_none pos_fix w_50 h_100 top_0">
    <nav class="module press bg_gray_333 h_in">
      <h3 class="dis_block text_hidden ovh w_97 c_gray_ccc pl_3 line_h_38rem">菜单展示</h3>
      <ul>
        <li class="bor_bottom bor_gray_222 active_gray_555" data-href="demo5.html">
          <dl class="pos_rel pl_3 ovh list_h_36rem">
            <dt class="fl ovh w_90 text_hidden">
              <i class="c_white vert_al_m fs_12rem icon-mn_baobiao"></i>
              <span class="ml_05rem c_white">菜单01</span>
            </dt>
            <dd class="pos_abs wm_94 right_2 c_white text_al_r">
              <i class="fs_08rem icon-ln_qianjin_b"></i>
            </dd>
          </dl>
        </li>
        <li class="bor_bottom bor_gray_222 active_gray_555" data-href="demo5.html">
          <dl class="pos_rel pl_3 ovh list_h_36rem">
            <dt class="fl ovh w_90 text_hidden">
              <i class="c_white vert_al_m fs_12rem icon-mn_baobiao"></i>
              <span class="ml_05rem c_white">菜单02</span>
            </dt>
            <dd class="pos_abs wm_94 right_2 c_white text_al_r">
              <i class="fs_08rem icon-ln_qianjin_b"></i>
            </dd>
          </dl>
        </li>
        <li class="bor_bottom bor_gray_222 active_gray_555" data-href="demo5.html">
          <dl class="pos_rel pl_3 ovh list_h_36rem">
            <dt class="fl ovh w_90 text_hidden">
              <i class="c_white vert_al_m fs_12rem icon-mn_baobiao"></i>
              <span class="ml_05rem c_white">菜单03</span>
            </dt>
            <dd class="pos_abs wm_94 right_2 c_white text_al_r">
              <i class="fs_08rem icon-ln_qianjin_b"></i>
            </dd>
          </dl>
        </li>
        <li class="bor_bottom bor_gray_222 active_gray_555" data-href="demo5.html">
          <dl class="pos_rel pl_3 ovh list_h_36rem">
            <dt class="fl ovh w_90 text_hidden">
              <i class="c_white vert_al_m fs_12rem icon-mn_baobiao"></i>
              <span class="ml_05rem c_white">菜单04</span>
            </dt>
            <dd class="pos_abs wm_94 right_2 c_white text_al_r">
              <i class="fs_08rem icon-ln_qianjin_b"></i>
            </dd>
          </dl>
        </li>
        <li class="bor_bottom bor_gray_222 active_gray_555" data-href="demo5.html">
          <dl class="pos_rel pl_3 ovh list_h_36rem">
            <dt class="fl ovh w_90 text_hidden">
              <i class="c_white vert_al_m fs_12rem icon-mn_baobiao"></i>
              <span class="ml_05rem c_white">菜单05</span>
            </dt>
            <dd class="pos_abs wm_94 right_2 c_white text_al_r">
              <i class="fs_08rem icon-ln_qianjin_b"></i>
            </dd>
          </dl>
        </li>
      </ul>
    </nav>
  </dialog>
  <!----------AKjs_PopupWin End---------->

</main>

<footer class="press bg_gray_f9f dis_block">
  <menu class="bor_gray_ddd bor_top length5">
    <button type="button" class="fl h_100" data-href="demo.html">
      <i class="fs_18rem c_gray_777 icon-mn_gongneng"></i>
      <em class="fs_08rem c_gray_777">功能</em>
    </button>
    <button type="button" class="fl h_100" data-href="demo2.html">
      <i class="fs_18rem c_gray_777 icon-mn_hudong"></i>
      <em class="fs_08rem c_gray_777">聊天</em>
    </button>
    <button type="button" class="fl h_100" data-href="demo3.html">
      <i class="fs_18rem c_gray_777 icon-mn_huodong_fill c_theme"></i>
      <em class="fs_08rem c_gray_777 c_theme">瀑布流</em>
    </button>
    <button type="button" class="fl h_100" data-href="demo4.html">
      <i class="fs_18rem c_gray_777 icon-mn_kuangjia"></i>
      <em class="fs_08rem c_gray_777">布局</em>
    </button>
    <button type="button" class="fl h_100 new_icon" data-href="demo5.html">
      <i class="fs_18rem c_gray_777 icon-mn_kongjian"></i>
      <em class="fs_08rem c_gray_777">加载</em>
    </button>
  </menu>
</footer>

</body>
<script type="text/javascript">
    //引入AKjs功能插件的区域

    if (window.location.protocol == "file:") {
        alert("AKjs仅支持http或https协议访问！不支持直接打开本地文件的方式访问！通过本地配置服务器访问或者使用WebStorm软件打开访问即可！");
        throw new Error();
    }

    /*-----------------------------------------------AKjs_Include & AKjs_Plugin 插件按需引入区域-------------------------------------------*/
    AKjs_Include("js/common.js"); //功能插件按需引入（为了正常运行功能插件通过AKjs_Include方式引入）

    /*-----------------------------------------------AKjs_Popupwin (左侧方法)使用方法-------------------------------------------*/
    $(function() {
        $("#plug_menu_left").bind("click", function (el) {
            el.preventDefault();
            AKjs_Popupwin({
                dom: "#plug_MenuWin", //弹窗内容的布局
                hasMask: true, //是否开启遮罩层背景 (true / false)
                maskPosition: 3, //Mask的z-index数值
                closeBtn: "#popup_mask", //关闭弹窗按钮的Class名
                OneButton: el.currentTarget, //点击按钮和关闭按钮通用时需要加该属性
                toggleIcon: "fs_14rem icon-bt_quxiao_a", //是否点击后替换图标功能，加图标的Class名 （建议启用OneButton的参数后使用）
                callback:function (ele,toggle) { //通过回调获取弹窗显示后的以上参数
                    if (toggle) { //判断是否弹出弹窗
                        $("footer").addClass("z_index_2");
                        $("header, #ak-main, footer").removeClass("left_au").addClass("right_au");
                        $(ele[0].dom).removeClass("dis_none").removeClass("left_au").addClass("right_au").css({"left": parseInt(-$(ele[0].dom).outerWidth())+"px"});
                        $("header, #ak-main, footer").animate({
                            "left": parseInt($(ele[0].dom).outerWidth())+"px"
                        },500);
                        $(ele[0].dom).animate({
                            "left": 0
                        },500);
                    } else {
                        $("header, #ak-main, footer").animate({
                            "left": 0
                        },500);
                        $(ele[0].dom).animate({
                            "left": parseInt(-$(ele[0].dom).outerWidth())+"px"
                        },500);
                        setTimeout(function() {
                            $(ele[0].dom).addClass("dis_none");
                        },500);
                        setTimeout(function() {
                            $("header, #ak-main, footer").removeClass("right_au");
                            $(ele[0].dom).removeClass("right_au");
                            $("footer").removeClass("z_index_2");
                        },1000);
                    }
                }
            });
        });
    });

    /*-----------------------------------------------AKjs_Popupwin (右侧方法)使用方法-------------------------------------------*/
    $(function() {
        $("#plug_menu_right").bind("click", function (er) {
            er.preventDefault();
            AKjs_Popupwin({
                dom: "#plug_MenuWin", //弹窗内容的布局
                hasMask: true, //是否开启遮罩层背景 (true / false)
                maskPosition: 3, //Mask的z-index数值
                closeBtn: "#popup_mask", //关闭弹窗按钮的Class名
                OneButton: er.currentTarget, //点击按钮和关闭按钮通用时需要加该属性
                toggleIcon: "fs_14rem icon-bt_quxiao_a", //是否点击后替换图标功能，加图标的Class名 （建议启用OneButton的参数后使用）
                callback:function (ele,toggle) { //通过回调获取弹窗显示后的以上参数
                    if (toggle) { //判断是否弹出弹窗
                        $("footer").addClass("z_index_2");
                        $("header, #ak-main, footer").removeClass("right_au").addClass("left_au");
                        $(ele[0].dom).removeClass("dis_none").removeClass("right_au").addClass("left_au").css({"right": parseInt(-$(ele[0].dom).outerWidth())+"px"});
                        $("header, #ak-main, footer").animate({
                            "right": parseInt($(ele[0].dom).outerWidth())+"px"
                        },500);
                        $(ele[0].dom).animate({
                            "right": 0
                        },500);
                    } else {
                        $("header, #ak-main, footer").animate({
                            "right": 0
                        },500);
                        $(ele[0].dom).animate({
                            "right": parseInt(-$(ele[0].dom).outerWidth())+"px"
                        },500);
                        setTimeout(function() {
                            $(ele[0].dom).addClass("dis_none");
                        },500);
                        setTimeout(function() {
                            $("header, #ak-main, footer").removeClass("left_au");
                            $(ele[0].dom).removeClass("left_au");
                            $("footer").removeClass("z_index_2");
                        },1000);
                    }
                }
            });
        });
    });

    /*-----------------------------------------------AKjs_Waterfall 使用方法-------------------------------------------*/
    $(function() {
        $(".plug_waterfall").AKjs_Waterfall({
            scrollDom:$("#ak-scrollview"), //滚动区域元素设置
            spacingWidth: 5, // 布局的元素水平间距设置
            spacingHeight: 5, // 布局的元素垂直间距设置
            minColCount: 2, // 最小一行显示几个？
            itemAlign: "center", // 布局排列方式 (center|left)
            isFadeIn: true, //是否开启浅入效果 （追加元素中的class必须有ak-fadeIn才有效果）
            Callback: function(ele) {
                var data = {"data": [
                        { "src": "tibet-3.jpg" }, { "src": "tibet-2.jpg" }, { "src": "tibet-1.jpg" }, { "src": "tibet-5.jpg" }, { "src": "tibet-4.jpg" }, { "src": "tibet-6.jpg" }, { "src": "tibet-3.jpg" }, { "src": "tibet-5.jpg" }
                    ]};
                var str = "";
                var templ = '<figure class="bg_white ak-fadeIn"><img src="../img/{{src}}" class="defer_none" /></figure>'

                for(var i = 0; i < data.data.length; i++) {
                    str += templ.replace("{{src}}", data.data[i].src);
                }
                /*元素设置*/
                var wdropload = "<div class=\"ak-waterfall-down defer_03 pos_abs top_0 w_100\"><div class=\"ak-waterfall-load\"><span class=\"ak-waterfall-loading\"></span>加载中...</div></div>";
                ele.parent().append(wdropload);
                $(str).appendTo(ele);
            },
            ajaxCallback: function(ele, success, end) { //数据加载回调入口
                success();
                /*数据设置*/
                var data = {"data": [
                        { "src": "tibet-3.jpg" }, { "src": "tibet-2.jpg" }, { "src": "tibet-1.jpg" }, { "src": "tibet-5.jpg" }, { "src": "tibet-4.jpg" }, { "src": "tibet-6.jpg" }
                    ]};
                var str = "";
                var templ = '<figure class="bg_white ak-fadeIn"><img src="../img/{{src}}" class="defer_none" /></figure>'

                for(var i = 0; i < data.data.length; i++) {
                    str += templ.replace("{{src}}", data.data[i].src);
                }
                /*元素设置*/
                var wdropload = "<div class=\"ak-waterfall-down dis_none\"><div class=\"ak-waterfall-load\"><span class=\"ak-waterfall-loading\"></span>加载中...</div></div>\n" +
                    "    <div class=\"ak-waterfall-down dis_none\"><div class=\"ak-waterfall-noData\">暂无数据</div></div>";
                if ($(".ak-waterfall-down").length < 3) {
                    ele.parent().append(wdropload);
                }
                if (ele.children().length < 200) {
                    $(".ak-waterfall-down").eq(0).removeClass("dis_none");
                    $(".ak-waterfall-down").eq(1).addClass("dis_none");
                    $(str).appendTo(ele);
                } else {
                    $(".ak-waterfall-down").eq(0).addClass("dis_none");
                    $(".ak-waterfall-down").eq(1).removeClass("dis_none");
                }
                end();
            }
        });
    });

</script>
<style type="text/css">
  /*样式覆盖区域*/
</style>
</html>